<template>

    <div>
      <mt-header title="信息分享"></mt-header>
      <!--轮播图-->
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(img, index) in imgs" :key="index">
          <img :src="img.pic_url" alt="" class="">
        </mt-swipe-item>
      </mt-swipe>
      <!--九宫格-->
      <div class="grid">
        <ul>
          <li v-for="(module,index) in modules" :key="index">
            <router-link :to="module.route.name">
              <span :class="module.className"></span>
              <div>{{module.title}}</div>
            </router-link>
          </li>
        </ul>
      </div>
      <!--底部导航-->
      <mt-tabbar v-model="selected">
        <mt-tab-item id="首页">
          <img slot="icon" src="../../static/img/index.png">
          首页
        </mt-tab-item>
        <mt-tab-item id="教程">
          <img slot="icon" src="../../static/img/vip.png">
          教程
        </mt-tab-item>
        <mt-tab-item id="我们">
          <img slot="icon" src="../../static/img/shopcart.png">
          我们
        </mt-tab-item>
        
      </mt-tabbar>
    </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      selected:'',
      imgs:[],//轮播图
      modules:[
        {title:'新闻资讯',className:'back-news',route:{name:'NewsList'}},
        {title:'教程分享',className:'back-picShare',route:{name:'VideoList'}},
        {title:'技术博文',className:'back-goodsShow',route:{name:'BlogList'}},
        {title:'留言反馈',className:'back-feedback',route:{name:'Feedback'}},
        {title:'搜索咨询',className:'back-search',route:{name:''}},
        {title:'联系我们',className:'back-callme',route:{name:''}},
      ]
    }
  },
  created(){
    console.log(this.$route);
    this.$axios.get('getLunbo')
    .then(res=>{
      this.imgs=res.data.data;
    })
    .catch(err=>{
      console.log(err);
    });
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .mint-swipe{
    width: 100%;
    height: 200px;
  }
  .mint-swipe img{
    width: 100%;
    height: 100%;
  }
</style>
